<template>
	<div class="components-modal flex" @click="removeToast">
		<div class="content" @click.stop="holdToast">
			<div class="infoParent">
				<slot name='title'></slot>
				<slot name='info'></slot>
			</div>
			<!--<div class="footer flex">
				<span class="sure footerspan" @click="sureModal">确认</span>
			</div>-->
		</div>
	</div>
</template>

<script>
	export default {
		data () {
			return {
				
			}
		},
		methods: {
			cancelModal() {
				 this.$emit("cancel");
			}
			,sureModal() {
				 this.$emit("sure");
			},
			removeToast() {
				this.$emit("components-modal");
			},
			holdToast() {
				this.$emit("content");
			}
		}
	}
</script>

<style lang="less" rel="stylesheet/less">
	.components-modal{
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		justify-content: center;
		align-items: center;
		background: rgba(0,0,0,.6);
		.content{
			background: #FFFFFF;
			border-radius: .08rem;
			width: 5.46rem;
			height: 6.2rem;
			.infoParent{
				width: 5.46rem;
			}
			.footer{
				height: .88rem;
				border-bottom-left-radius: .08rem;
				border-bottom-right-radius: .08rem;
				justify-content: space-between;
				.footerspan{
					display: inline-block;
					flex: 1;
					height: .88rem;
					line-height: .88rem;
					text-align: center;
					font-size: .32rem;
				}
				.cancel{
					background: #FFFFFF;
					color: #909090;
				}
				.sure{
					background: #FBC200;
					color: #464646;
					border-bottom-left-radius: .08rem;
					border-bottom-right-radius: .08rem;
				}
			}
			
		}
	}
</style>